//1.引入Vue
import Vue from 'vue';

//2.引入Vuex
import Vuex from 'vuex';

// 3.引入axios
import axios from "axios";

// 3.//3.Vuex其实本质是Vue的一个插件,所以我们要让Vue使用Vuex这个插件
Vue.use(Vuex)


//创建一个state对象
const state = {
    count: 0,
    price: 100,
    movieList: [],
}
// 创建一个mutations(修改数据的)对象
const mutations = {
    increment(state) {
        state.count++
    },
    //mutation中的函数的第二个参数载荷(payload) 都是接收commit的传参
    //vuex还是希望payload是一个对象,这样可以传递多个参数
    incrementN(state, { n }) {
        state.count += n
    },

    setMovieList(state, movieList) {
        state.movieList = movieList;
        // 将获取到的电影列表放入state中的电影列表中
    }

}
//创建actions处理异步请求
const actions = {
    async getMovieList({ commit }) {
        const result = await axios.get(
            "https://pcw-api.iqiyi.com/search/recommend/list?channel_id=1&data_type=1&mode=11&page_id=2&ret_num=48&session=b9fd987164f6aa47fad266f57dffaa6a"
        );
        commit('setMovieList', result.data.data.list)
    },

    //因为actions中一定会调用commit去调用mutation,
    //所以action中的函数,接受一个对象,对象中提供一个commit方法
    incrementWait({ commit }) {
        setTimeout(() => {
            //我们不要在action中操作数据
            //当异步完成以后,把数据交给mutation去操作数据
            commit('increment')
        }, 2000)
    },

    incrementNWait({ commit }, payload) {
        setTimeout(() => {
            commit('incrementN', payload)
        }, 2000)
    }
};


//创建getters对象
// 有时候我们需要从 store 中的 state 中派生出一些状态，
// 例如对列表进行过滤并计数等等 需要计算，我们就用到了getters 类似于vue中的计算属性
// getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
const getters = {
    myMovieList(state) {
        return state.movieList.filter((movie) => {
            // return movie.albumName.length < 7 && movie.albumName.length > 3;
            return movie.albumName.length == 3;
        });
    },

    //可以传参的getters
    yourMovieList(state) {
        //如果计算属性在计算的时候，需要接收参数，则getters函数需要返回一个函数
        return ({ a, b }) => {
            return state.movieList.filter((movie) => {
                return movie.albumName.length <= b && movie.albumName.length >= a;
            });
        };
    }
}

//4.创建一个store(vuex的实例),参数是一个配置对象,在配置对象中可以配置actions,mutations,state,getters等等
//暴露出去供Vue实例的配置项挂载
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})